import React from 'react';
import { DataState } from '../../types';

interface DataPreviewProps {
  data: DataState;
}

const DataPreview: React.FC<DataPreviewProps> = ({ data }) => {
  if (!data.data || data.data.length === 0) {
    return (
      <div className="bg-white rounded-lg border border-gray-200 p-6 text-center shadow-sm">
        <p className="text-gray-500">No data available for preview</p>
      </div>
    );
  }

  const displayData = data.data.slice(data.startRow - 1, data.endRow);
  const totalPoints = displayData.length;
  
  // Calculate some basic statistics
  const sum = displayData.reduce((acc, val) => acc + val, 0);
  const mean = sum / totalPoints;
  const min = Math.min(...displayData);
  const max = Math.max(...displayData);
  
  // Calculate frequencies for each digit (0-9)
  const frequencies: Record<number, number> = {};
  for (let i = 0; i < 10; i++) {
    frequencies[i] = 0;
  }
  
  displayData.forEach(val => {
    const digit = val % 10;
    frequencies[digit]++;
  });

  // Top frequent digits
  const sortedFrequencies = Object.entries(frequencies)
    .sort((a, b) => b[1] - a[1])
    .map(([digit, count]) => ({
      digit: parseInt(digit),
      count,
      percentage: (count / totalPoints) * 100
    }));

  return (
    <div className="bg-white rounded-lg border border-gray-200 p-4 shadow-sm">
      <h3 className="text-lg font-medium text-gray-800 mb-4">Data Preview</h3>
      
      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <h4 className="text-sm font-medium text-gray-700 mb-2">Basic Statistics</h4>
          <div className="bg-gray-50 rounded-md p-3 space-y-2">
            <div className="flex justify-between">
              <span className="text-gray-600">Total Data Points:</span>
              <span className="font-medium">{totalPoints}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-600">Mean Value:</span>
              <span className="font-medium">{mean.toFixed(2)}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-600">Min Value:</span>
              <span className="font-medium">{min}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-600">Max Value:</span>
              <span className="font-medium">{max}</span>
            </div>
          </div>
        </div>
        
        <div>
          <h4 className="text-sm font-medium text-gray-700 mb-2">Digit Frequencies</h4>
          <div className="bg-gray-50 rounded-md p-3 space-y-2">
            {sortedFrequencies.slice(0, 5).map(({ digit, count, percentage }) => (
              <div key={digit} className="flex items-center">
                <span className="w-8 h-8 flex items-center justify-center bg-blue-100 text-blue-800 rounded-md font-medium">
                  {digit}
                </span>
                <div className="ml-2 flex-1">
                  <div className="w-full bg-gray-200 rounded-full h-2.5">
                    <div
                      className="bg-blue-600 h-2.5 rounded-full"
                      style={{ width: `${percentage}%` }}
                    ></div>
                  </div>
                </div>
                <span className="ml-2 text-gray-600 w-16 text-right">{percentage.toFixed(1)}%</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="mt-4">
        <h4 className="text-sm font-medium text-gray-700 mb-2">Sample Values</h4>
        <div className="overflow-x-auto">
          <div className="flex space-x-2 pb-2">
            {displayData.slice(0, 15).map((value, index) => (
              <div
                key={index}
                className="flex-shrink-0 w-10 h-10 flex items-center justify-center bg-gray-100 rounded-md font-medium text-gray-800"
              >
                {value}
              </div>
            ))}
            {displayData.length > 15 && (
              <div className="flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-md font-medium text-gray-500">
                ...
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default DataPreview;